<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeAtlas - 你的技术实现导航图</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <section class="hero">
        <img src="../../icons/icon256.png" alt="CodeAtlas Logo" class="logo">
        <h1 class="title">CodeAtlas</h1>
        <p class="subtitle">探索、分享和学习技术实现的知识图谱</p>
        <div>
            <a href="https://github.com/yourusername/code-atlas" class="cta-button">
                <i class="fab fa-github"></i> 开始探索
            </a>
            <a href="#features" class="cta-button" style="background: var(--primary-color)">
                了解更多
            </a>
        </div>
    </section>

    <!-- 特点介绍 -->
    <section class="features" id="features">
        <div class="features-grid">
            <div class="feature-card">
                <i class="fas fa-map feature-icon"></i>
                <h3>结构化知识</h3>
                <p>清晰的分类体系，帮助你快速定位所需的技术实现方案。就像一张详尽的技术地图，指引你找到最佳路径。</p>
            </div>
            <div class="feature-card">
                <i class="fas fa-code feature-icon"></i>
                <h3>实用导向</h3>
                <p>每个实现都包含完整的代码示例和详细说明，直接可用于实际项目。不是简单的代码片段，而是完整的解决方案。</p>
            </div>
            <div class="feature-card">
                <i class="fas fa-graduation-cap feature-icon"></i>
                <h3>深入学习</h3>
                <p>通过研究优秀的技术实现，学习最佳实践和设计思路。每个实现都是一次深入的技术探索。</p>
            </div>
        </div>
    </section>

    <!-- 分类展示 -->
    <section class="categories">
        <div class="category-grid">
            <div class="category-card">
                <img src="../icons/unity-icon.svg" alt="Unity" class="category-icon">
                <h3>Unity 开发</h3>
                <p>游戏引擎相关的技术实现，包括渲染、物理和动画系统等核心功能。</p>
            </div>
            <div class="category-card">
                <img src="../icons/render-icon.svg" alt="渲染" class="category-icon">
                <h3>渲染技术</h3>
                <p>从基础着色器到高级特效，探索图形渲染的艺术。</p>
            </div>
            <div class="category-card">
                <img src="../icons/web-icon.svg" alt="Web" class="category-icon">
                <h3>Web 开发</h3>
                <p>现代 Web 应用开发的最佳实践和技术实现。</p>
            </div>
        </div>
    </section>

    <!-- 数据统计 -->
    <section class="stats">
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-number">100+</div>
                <div>技术实现</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">6</div>
                <div>技术领域</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">1000+</div>
                <div>开发者</div>
            </div>
        </div>
    </section>

    <!-- 行动召唤 -->
    <section class="cta-section">
        <h2>加入我们的技术探索之旅</h2>
        <p>分享你的技术实现，帮助更多开发者成长</p>
        <a href="https://github.com/yourusername/code-atlas" class="cta-button">
            <i class="fab fa-github"></i> 立即参与
        </a>
    </section>

    <!-- 页脚 -->
    <footer>
        <p>CodeAtlas - 你的技术实现导航图</p>
        <p>Made with ❤️ by the developer community</p>
    </footer>
</body>
</html>
